<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>作用域</title>
  </head>
  <body>
    <!-- 语法：函数内定义的变量 其作用域仅限于函数内部 -->
    <!-- 案例：函数内的空气 -->
    <!-- <script>
      /* 
        函数的大括号为函数造出一个封闭的【作用域】 
        定义在作用域之内的数据，在作用域之外是访问不到的
        强行访问：ReferenceError: safe is not defined
        */
      function home() {
        // 在作用域内声明变量safe
        var safe = "柏不平保险柜";

        // 在作用域之内可以访问到safe
        console.log("平哥在家里访问safe", safe);
      }

      home();

      // 作用域之外访问作用域内的safe：
      // 报错：ReferenceError: safe is not defined(引用错误：safe没有定义)
      console.log("班长站在晚风习习的大街上访问平哥家的safe", safe);
    </script> -->

    <!-- 语法：全局变量 局部变量 -->
    <!-- 案例：保险柜在家里 空气在大街上 -->
    <!-- <script>
      /* 
        函数的大括号为函数造出一个封闭的【作用域】 
        定义在作用域之内的数据，在作用域之外是访问不到的
        强行访问：ReferenceError: safe is not defined
        */

      // 声明在代码最外层的变量 作用域覆盖全局 => 全局变量
      var air = "大街上的空气";

      function home() {
        // 在作用域内声明变量safe 作用域只在函数内 => 局部变量
        var safe = "柏不平保险柜";

        // 在作用域之内可以访问到safe
        console.log("平哥在家里访问safe", safe);

        //
        console.log("平哥在家里访问air", air);
      }

      home();

      console.log("班长站在大街上访问air", air);
    </script> -->

    <!-- 语法：自由变量的访问规则（向外层就近访问） -->
    <!-- 案例：就近访问空气 -->
    <script>
        // 全局变量
        var air = "大街上的空气"

        function home(){
            // var air = "平哥家的空气"
            console.log("平哥在home里呼吸",air);

            // 平哥家的狗窝
            function dogHouse(){
                // var air = "臭皮的气息"
                console.log("臭皮在dogHouse里呼吸",air);

                function box(){
                    var air = "臭皮的魔法盒里的空气"
                    console.log("一只小强在臭皮的魔法盒box里呼吸",air);
                }
                box()
            }

            dogHouse()
        }

        home()
    </script>  
</body>
</html>
